<!-- 种群健康证明 -->
<template>
    <!-- 筛选条件 -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="企业名称" v-if="companySelect">
            <el-select filterable clearable v-model="formInline.companyId">
            <el-option v-for="item in companyNameList" :label="item.name" :value="item.id" :key="item.id" />
            </el-select>
        </el-form-item>
        <el-form-item label="检测机构">
            <el-input v-model="formInline.detectionInstitution" placeholder="请输入检测机构" clearable />
        </el-form-item>
        <el-form-item label="送检日期">
            <el-date-picker
                v-model="dateRange"
                type="daterange"
                range-separator="-"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                value-format="YYYY-MM-DD"
                @change="changeDate"
                @clear="clearDate"
            />
        </el-form-item>
        <el-form-item>
            <el-button icon="Search" @click="getHealthCertificatePage">查询</el-button>
        </el-form-item>
    </el-form>

    <div class="mb-4" style="margin-bottom: 18px;">
        <el-button v-if="addButton" type="success" icon="Plus" @click="isShowAdd = true">新增</el-button>
        <el-button type="primary" icon="Download">导出</el-button>
    </div>
    
    <!-- 表格 -->
    <el-table :data="tableData" stripe border style="width: 100%;">
        <el-table-column label="序号"  width="80px" type="index" />
        <el-table-column v-if="companyColumn" prop="companyName" label="企业名称" width="150" show-overflow-tooltip />
        <el-table-column prop="inspectionDate" label="送检日期" width="120px" />
        <el-table-column prop="examinationAgency" label="检测机构" min-width="120px" />
        <el-table-column prop="reportDate" label="报告日期" width="120px" />
        <el-table-column label="布鲁氏菌抗体检测" width="150px">
            <template #default="scope">
                <div>阴性率(%): {{ scope.row.brucellaNegativeRate }}</div>
                <div>阳性率(%): {{ scope.row.brucellaPositiveRate }}</div>
            </template>
        </el-table-column>
        <el-table-column label="牛结核病" width="150px">
            <template #default="scope">
                <div>阴性率(%): {{ scope.row.bovineTbNegativeRate }}</div>
                <div>阳性率(%): {{ scope.row.bovineTbPositiveRate }}</div>
            </template>
        </el-table-column>
        <el-table-column label="口蹄疫免疫抗休" width="200px">
            <template #default="scope">
                <div>A型抗体合格率 (%): {{ scope.row.footAndMouthAAntibodyRate }}</div>
                <div>O型抗体合格率 (%): {{ scope.row.footAndMouthOAntibodyRate }}</div>
            </template>
        </el-table-column>
        <el-table-column label="囗蹄疫病原学检测" width="200px">
            <template #default="scope">
                <div>阴性率(%): {{ scope.row.footAndMouthPathogenNegativeRate }}</div>
                <div>阳性率(%): {{ scope.row.footAndMouthPathogenPositiveRate }}</div>
            </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
            <template #default="scope">
                <el-button v-if="editButton" type="primary" icon="Edit" size="small" @click="editItem(scope.row.id)">编辑</el-button>
                <el-button v-if="scope.row.reportUrl" type="info" icon="Download" size="small" @click="downloadReport(scope.row.reportUrl)">下载</el-button>
            </template>
        </el-table-column>
    </el-table>
    <br/>
    <!-- 分页器 -->
    <el-pagination
        v-model:currentPage="pageNo"
        v-model:page-size="limit"
        :page-sizes="[15, 30, 50, 100]"
        :small="false"
        :background="true"
        layout="prev, pager, next, jumper, ->, sizes, total"
        :total="total"
        @current-change="getHealthCertificatePage"
        @size-change="sizeChange"
    />

    <!-- 新增弹窗 -->
    <add :isShowAdd="isShowAdd" @closeAddDrawer="closeAddDrawer"></add>

    <!-- 编辑弹窗 -->
    <edit :isEditShow="isEditShow" :editId="editId" @closeIsEditShow="closeIsEditShow"></edit>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { reqGetCompanyNameList } from '@/api/company'
import { reqGetHealthCertificatePage } from '@/api/healthManage'
import add from './add/index.vue'
import edit from './edit/index.vue'
// 引入用户相关小仓库
import useUserStore from '@/store/modules/user'
let userStore = useUserStore()
const companyColumn = userStore.componentConfig.companyColumn // 企业名称列-是否显示
const companySelect = userStore.componentConfig.companySelect // 企业下拉-是否显示
const addButton = userStore.componentConfig.addButton // 新增按钮-是否显示
const deleteButton = userStore.componentConfig.deleteButton // 删除按钮-是否显示
const editButton = userStore.componentConfig.editButton // 编辑按钮-是否显示
const errorButton = userStore.componentConfig.errorButton // 数据异常按钮-是否显示
const uploadButton = userStore.componentConfig.uploadButton // 导入按钮-是否显示

// 分页器当前页码
let pageNo = ref(1)
// 每一页展示多少条数据
let limit = ref(15)
// 数据总条数
let total = ref(0)

// 新增-弹窗的显示与隐藏
let isShowAdd = ref(false)

// 关闭新增弹窗
const closeAddDrawer = (val) => {
    isShowAdd.value = val
    getHealthCertificatePage()
}

// 下载报告
const downloadReport = (reportUrl) => {
    let url = reportUrl
    let a = document.createElement("a")
	a.style = "display: none"
	a.target = "_blank"
	// a.download = "file"
	a.href = url
	document.body.appendChild(a)
	a.click()
	document.body.removeChild(a)
	URL.revokeObjectURL(url)
}

// 编辑-弹窗的显示与隐藏
let isEditShow = ref(false)
// 关闭编辑弹窗
const closeIsEditShow = (val) => {
    isEditShow.value = val
}

// 点击编辑按钮
let editId = ref('')
const editItem = (id) => {
    isEditShow.value = true
    editId.value = id
}

// 表单数据收集
const formInline = reactive({
    companyId: '', // 企业id
    detectionInstitution: '', // 检测机构
    startDate: null, // 报告-开始日期
    endDate: null, // 报告-结束日期
    sortName: '', // 排序字段名称
    sortType: '', // 排序类型：ascending-正序、descending-倒序
})

// 日期变化时触发
const dateRange = ref(null) // 日期范围
const changeDate = (date) => {
    if(date){
        formInline.startDate = date[0]
        formInline.endDate = date[1]
    }
}
const clearDate = () => {
    dateRange.value = null
    formInline.startDate = null
    formInline.endDate = null
}

// 获取表格数据
let tableData = ref([])
const getHealthCertificatePage = async () => {
    let res = await reqGetHealthCertificatePage(Object.assign(formInline, {
        pageNumber: pageNo.value, // 页号
        pageSize: limit.value, // 每页数量
    }))
    tableData.value = res.data.records
    total.value = res.data.totalRow
}

// 获取企业下拉列表数据
let companyNameList = ref([])
const getCompanyNameList = async () => {
    let res = await reqGetCompanyNameList()
    companyNameList.value = res.data
}

// 分页的下拉菜单发生改变时触发
const sizeChange = () => {
    pageNo.value = 1
    getCowSlaughterPage()
}

// 挂载完毕
onMounted(() => {
    getCompanyNameList()
    getHealthCertificatePage()
})
</script>

<style scoped lang="scss">
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>